<template>
    <div id="tmpl">
        <mt-header fixed title="看会儿视频">
            <router-link to slot="left">
                <mt-button icon="back" @click="$router.back(-1)"></mt-button>
                <!-- 返回上一页 -->
            </router-link>
        </mt-header>
        <div class="content-box" @scroll="scrollHideTab($event)">
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li
                        v-for="(item, index) in VideoList"
                        :key="index"
                        class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"
                    >
                        <a href="#">
                            <!-- <img :src="{{item.data.icon}}" alt=""> -->
                            <span
                                :title="item.data.description"
                                class="mui-icon"
                                :style="[{'background':'url('+ item.data.icon +') no-repeat top left'},{'background-size':'110px 110px'}]"
                            ></span>
                            <div class="mui-media-body">{{item.data.title.slice(1,3)}}</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            VideoList: []
        };
    },
    created() {
        this.getmusiclist();
    },
    methods: {
        getmusiclist() {
            let url = this.$api + "/videoCategory";
            this.$http.get(url).then(function(res) {
                console.log(res.body);
                this.VideoList = res.body.result.itemList;
            });
        },
        scrollHideTab(e){
            this.$scrollHidden(e)
        }
    }
};
</script>
<style lang="less" scoped>
.mui-bar.mui-bar-tab {
    display: none;
}
.mui-icon {
    width: 110px;
    height: 110px;
}
.mui-content > .mui-table-view:first-child {
    margin-top: 0;
}
</style>